<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页查询示例</title>
<link href="../plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript"
	src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<link href="../plugin/bootstrap-table/dist/bootstrap-table.min.css"
	rel="stylesheet">
<script type="text/javascript"
	src="../plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="../plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
	<div class="container-fluid" id="ttttt">
		<!--        自定义搜索条件区域#} -->
		<div class="fixed-table-toolbar">
			<div class="pull-left search">
				<input id="userNum" value="" class="form-control"
					placeholder="请输入账号精确查询">
			</div>
			<div class="pull-left search">
				<input id="userName" value="" class="form-control"
					placeholder="请输入姓名模糊查询">
			</div>
			<div class="columns columns-left btn-group pull-left">
				<button id="search-button" type="button" class="btn btn-primary">查询</button>
			</div>
			<div class="columns columns-left btn-group pull-left">
				<button id="reset-button" type="button" class="btn btn-primary"
					onclick="clean()">重置</button>
			</div>
		</div>
		<!--  bootstrap table自动渲染区域-->
		<table data-toggle="table" data-mobile-responsive="true"
			data-row-style="rowStyle" data-show-columns="true"
			class="table table-hover table-condensed" id="mytab">
		</table>
	</div>
</body>
<script>
$('#mytab').bootstrapTable({
    /*全部参数*/
    url: "../UserPage/Userlist",                     //从后台获取数据时，可以是json数组，也可以是json对象
    dataType: "json",
    method: 'get',                      //请求方式（*）
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: true,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）,数据为json数组时写client，json对象时（有total和rows时）这里要为server方式，写client列表无数据*/
    pageNumber: 1,                       //初始化加载第一页，默认第一页
    pageSize: 2,                       //每页的记录行数（*）
    pageList: [10, 15, 20, 30],        //可供选择的每页的行数（*）
    /*search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大*/
    strictSearch: true,
    showColumns: true,                  //是否显示所有的列
    showRefresh: true,                  //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    /*height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度*/
    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
    showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    //得到查询的参数
    queryParams: function (params) {
        //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的，如果加搜索条件放在这里
        var query_params = {
            userNum:$("#userNum").val(),
            userName:$("#userName").val(),
            pageSize: params.limit,                         //页面大小
            pageNum: (params.offset / params.limit) + 1   //页码
        };
        return query_params;
    },
    columns: [
        {
            checkbox: true  //第一列显示复选框
        },
        {
            field: 'id',  //返回数据rows数组中的每个字典的键名与此处的field值要保持一致
            title: '编号'
        },
        {
            field: 'userNum',
            title: '账号'
        },
        {
            field: 'userName',
            title: '姓名'
        },
        {
            field: 'sex',
            title: '性别'
        },
        {
            field: 'lastLoginTime',
            title: '最近登录时间'
        },
        {
            field: 'phone',
            title: '手机号'
        },
        {
            field: 'email',
            title: '邮箱'
        },
        {
            field: 'remark',
            title: '备注'
        },
        {
            field: 'status',
            title: '状态'
        },
        {
            field: 'operate',
            title: '操作',
            width: 120,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter,
        },
    ],
    onLoadSuccess: function () {
        $('#mytab').bootstrapTable('resetView', {
            height: getAutoHeight()
        });
    },
    responseHandler: function(res) {
        return {
            "total": res.total,//总页数
            "rows": res.list //数据
        };
    }
});
function actionFormatter(value, row, index) {
    var result;
    result = "<a href='/pubblog/initEdit?id=" + row.id + "' class='btn btn-xs blue'   title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
    return result;
}
//搜索查询按钮触发事件
$(function () {
    $("#search-button").click(function () {
        $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
/*         $('#userNum').val()
        $('#userNum').val() */
    })
})
//重置搜索条件
function clean() {
    //先清空
    $('#userNum').val('');
    $('#userName').val('');
    //清空后查询条件为空了，再次刷新页面，就是全部数据了
    $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
}
//敞口大小改变自动执行
$(window).resize(function () {
    $('#mytab').bootstrapTable('resetView', {
        height: getAutoHeight()
    });
});
function getAutoHeight() {
    //当前窗口高度
    var panelH = $(window).height();
    //拿到顶部工具栏高度
    var toolBarH = $(".fixed-table-toolbar").height();
    //计算表格container该设置的高度
    var height = panelH - toolBarH;
    return height;
}
</script>
</html>